<style lang="scss" scoped>
	.content {
		.list-item {
			display: flex;

			image {
				width: 200rpx;
				height: 200rpx;
				flex-shrink: 0;
			}

			.right {
				flex: 1;
				overflow: hidden;
				margin-left: 10rpx;

				.title {
					font-weight: bold;
				}

				.desc {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>

<template>
	<view class="content">
		<navigator url="/pages/add/add">
			<button>去添加页面</button>
		</navigator>
		<view class="list-item" v-for="item in data" :key="item._id">
			<image :src="item.image" mode=""></image>
			<view class="right">
				<view class="title">{{item.title}}</view>
				<view class="desc">{{item.desc}}</view>
				<view class="price">{{item.price}}</view>
				<button @click="handleDelete(item)" size="mini">删除</button>
				<button @click="handleEdit(item)" size="mini">修改</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const data = ref([])
	const pageCode = ref(1)
		
	async function handleEdit(item) {
		uni.navigateTo({
			url: `/pages/add/add?_id=${item._id}`
		})
	}
	
	async function handleDelete(item) {
		const resp = await uniCloud.database().collection('goodList')
			.doc(item._id)
			.remove();
		data.value = data.value.filter(v => v._id !== item._id)
	}
	async function getGoodListData() {
		const goodList = await uniCloud.database()
			.collection('goodList')
			.skip((pageCode.value - 1) * 10)
			.limit(10)
			.get();
		console.log(`第${pageCode.value}页`, goodList.result.data)
		data.value = [...data.value, ...goodList.result.data]
		uni.stopPullDownRefresh()
	}

	getGoodListData()

	onReachBottom(() => {
		pageCode.value++;
		getGoodListData()
	})

	onPullDownRefresh(() => {
		pageCode.value = 1;
		data.value = []
		getGoodListData()
	})
</script>